<template>
	<view>
		<div class="box">
			<uv-text color="rgb(85, 170, 255)" text="手动模式" size="30px" v-show="!this.mode"></uv-text>
			<uv-text color="rgb(85, 170, 255)" text="自动模式" size="30px" v-show="this.mode"></uv-text>
			<uv-switch v-model="mode"></uv-switch>
		</div>
		
		<uv-grid :col="2" @click="click" v-show="!this.mode">
			<uv-grid-item v-for="(item,index) in baseList" :key="index">
				<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
				<text class="grid-text">{{item.title}}</text>
			</uv-grid-item>
		</uv-grid>
		<uv-divider v-show="this.show==0" text="设置功率"></uv-divider>
		<uv-divider v-show="this.show==1" text="设置阈值"></uv-divider>
		<view v-show="show == 0" class="container">
			<div class="box">
				<uv-tags text="照明" plain size="large" icon="tags" color="#ffaa00" borderColor="#ffaa00"></uv-tags>
				<uv-number-box v-model="publishCommandsData.bright" @change="valChange" :min="0" :max="1000" step="1"
					decimal-length="1"></uv-number-box>
			</div>
			
			<div class="box">
				<uv-tags text="风机" plain size="large" icon="tags" color="#00aa00" borderColor="#00aa00"></uv-tags>
				<uv-number-box v-model="publishCommandsData.speedM2" @change="valChange" :min="0" :max="1000" step="0.1"
					decimal-length="1"></uv-number-box>
			</div>
			<div class="box">
				
				<uv-tags text="空调" plain size="large" icon="tags"></uv-tags>
				
				<uv-number-box v-model="publishCommandsData.speedM1" @change="valChange" :min="0" :max="1000" step="0.1"
					decimal-length="1"></uv-number-box>
					<view>
						<uv-button v-show="air==2" class="air" type="primary" text="当前制冷" v-model="publishCommandsData.air" @click="changeAir()"></uv-button>
						<uv-button v-show="air==1" class="air" type="error " text="当前制热" v-model="publishCommandsData.air" @click="changeAir()"></uv-button>
					</view>
			</div>
		
		</view>
		<view v-show="this.show==1">
			<view>
				<div class="box">
					<uv-tags text="设定的上限温度：" plain size="large" color="#ffaa00" borderColor="#ffaa00"></uv-tags>
					<uv-number-box v-model="publishCommandsData.tinDH" @change="valChange" :min="-200" :max="200"
						step="0.1" decimal-length="1"></uv-number-box>
				</div>
				<div class="box">
					<uv-tags text="设定的下限温度：" plain size="large" color="#ffaa00" borderColor="#ffaa00"></uv-tags>
					<uv-number-box v-model="publishCommandsData.tinDL" @change="valChange" :min="-200" :max="200"
						step="0.1" decimal-length="1"></uv-number-box>
				</div>
				<div class="box">
					<uv-tags text="设定可利用温差：" plain size="large" color="#ffaa00" borderColor="#ffaa00"></uv-tags>
					<uv-number-box v-model="publishCommandsData.tg" @change="valChange" :min="0" :max="10" step="0.1"
						decimal-length="1"></uv-number-box>
				</div>
			</view>

			<view>
				<div class="box">
					<uv-tags text="设定的光照阈值：" plain size="large" color="#ffaa00" borderColor="#ffaa00"></uv-tags>
					<uv-number-box v-model="publishCommandsData.lxd" @change="valChange" :min="0" :max="1000" step="0.1"
						decimal-length="1"></uv-number-box>
				</div>
				<div class="box">
					<uv-tags text="光照控制时间段：" plain size="large" color="#ffaa00" borderColor="#ffaa00"></uv-tags>

					<view class="timePicker">
						<uv-datetime-picker ref="datetimePicker1" v-model="TBegin" mode="datetime"
							:formatter="formatter" @confirm="confirm1" :minDate="1587524800000" :maxDate="1786778555000">
						</uv-datetime-picker>
						<uv-button @click="open1()" color="#ffaa00" size="small" text="起始时间"></uv-button>
					</view>
					<view class="timePicker">
						<uv-datetime-picker ref="datetimePicker2" v-model="TEnd" mode="datetime"
							:formatter="formatter" @confirm="confirm2" :minDate="1587524800000" :maxDate="1786778555000">
						</uv-datetime-picker>
						<uv-button @click="open2()" color="#ffaa00" size="small" text="终止时间"></uv-button>
					</view>
				</div>
				<div class="box">
					<uv-tags text="同步时间到设备" plain size="large" icon="tags" color="#00aa00"
						borderColor="#00aa00"></uv-tags>
					<uv-switch v-model="isSyncTime"></uv-switch>
				</div>
			</view>
		</view>
		
		<view class="submit" >
			<uv-button size="large" @click="publishData()" text="发送到设备"
				color="linear-gradient(to right, rgb(85, 170, 255), rgb(255, 170, 0))"></uv-button>
		</view>
	

	</view>
</template>
<script>
	export default {
		data() {
			return {
				baseList: [{
					name: 'grid',
					title: '设置功率'
				}, {
					name: 'setting',
					title: '设置阈值'
				}],
				show: 0,
				
				TBegin: Number(new Date()),
				TEnd: Number(new Date()),


				publishCommandsData: {},
				isSyncTime: false,
				mode: false,
				air:1,
				host: [],
			}
		},
		onLoad: function (options) {
		        // setTimeout(function () {
		        //     console.log('start pulldown');
		        // }, 1000);
		        //页面加载时就进行一次页面的下拉, 如果不需要可以不写
		        uni.startPullDownRefresh();
		    },
		mounted() {
			this.cabinId = getApp().globalData.cabinId;
			this.host = getApp().globalData.host;
			this.getPublishCommands();
		},
		methods: {
			
			// 下拉页面刷新
			onPullDownRefresh() {
			        console.log('refresh');
			        setTimeout(function () {
			            uni.stopPullDownRefresh();
			        }, 1000);
			    },
			
			click(name) {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: `点击了第${name}个`,
					
				// });
				this.show = name;
			},
			
			//选择时间
		open1() {
			this.$refs.datetimePicker1.open();
		},
		open2() {
			this.$refs.datetimePicker2.open();
		},
		confirm1(e) {
			console.log('confirm', e);
			this.TBegin = e.value;
			console.log("TBegin:"+this.TBegin);
		},
		confirm2(e) {
			console.log('confirm', e);
			this.TEnd = e.value;
			console.log("TEnd:"+this.TEnd);
		},
			
			changeAir(){
				if(this.air==1){
					this.air=2;
				}else {
					this.air=1;
				}
			},
			
			getPublishCommands() {
				const backendURL = "http://"+this.host+":7777/publish/parameters/" + this.cabinId;
				console.log(backendURL);
				let that = this;
					uni.request({
						url: backendURL,
						method: "GET",
						success: function(res) {
							that.publishCommandsData = res.data.data;
							console.log(this.publishCommandsData);
							
						},
						fail: (err) => {
							console.error("Error fetching publishCommands data:", err);
					
						}
					});
				
			},
			publishData() {
			  const backendURL = "http://"+this.host+":7777/publish/parameters";
			  if (this.isSyncTime == true) {
			    this.publishCommandsData.isSyncTime = 1;
			  } else {
			    this.publishCommandsData.isSyncTime = 0;
			  }
			  if (this.mode == true) {
			    this.publishCommandsData.mode = 0;
			  } else {
			    this.publishCommandsData.mode = 1;
			  }
			  let that = this;
			  that.publishCommandsData.air = this. air;
			  that.publishCommandsData.tbegin = this.TBegin;
			  that.publishCommandsData.tend = this.TEnd;
			  console.log(backendURL);
			  console.log(that.publishCommandsData);
			  uni.request({
			    url: backendURL,
			    method: 'POST',
			    dataType: 'json',
			    data: JSON.stringify(that.publishCommandsData), // 将对象转换为JSON字符串
			    header: {
			      'content-type': 'application/json' // 设置content-type为application/json
			    },
			    success: function(res) {
			      console.log('成功', res);
				  console.log(that.publishCommandsData);
			    },
			    fail: function(res) {
			      console.log('错误', res);
			    }
			  });
			},


			//步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},

			//时间选择
			open() {
				this.$refs.datetimePicker.open();
			},
			confirm(e) {
				console.log('confirm', e);
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},

		},

	}
</script>
<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
	}

	.container {
		margin-top: 50px;
	}

	.box {
		display: flex;
		/* 将容器内的元素横向排列 */
		align-items: center;
		/* 元素在容器内垂直居中对齐 */
		justify-content: center;
		margin: 40px;
		/* 添加底部间距 */
	}

	.submit {
		display: flex;
		justify-content: center;
		margin: 40px;
	}
	
	
</style>